<template>
  <div class="chart-wrap">
    <div class="chart-header">
      <span class="header-th">排名</span>
      <span class="header-th">景区</span>
      <span class="header-th auto-width">预约数量</span>
    </div>
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { setAutoHoverIntervalFun } from '@/utils/echartUtils'
import { ranking1, ranking2, ranking3, ranking4 } from '../assets/ranking-icon'
let wuChartRef = ref()
let wuChart: echarts.ECharts = {} as echarts.ECharts
interface ChartProp {
  name: string
  value: number
  percentage: string
  maxValue: number
}
// 造数据
const getXData = () => {
  let data: ChartProp[] = [
    {
      value: 79999,
      name: '峨眉山',
      percentage: '80%',
      maxValue: 100000
    },
    {
      value: 59999,
      name: '稻城亚丁',
      percentage: '60%',
      maxValue: 100000
    },
    {
      value: 49999,
      name: '九寨沟',
      percentage: '50%',
      maxValue: 100000
    },
    {
      value: 39999,
      name: '万里长城',
      percentage: '40%',
      maxValue: 100000
    },
    {
      value: 29999,
      name: '北京故宫',
      percentage: '30%',
      maxValue: 100000
    }
  ]

  const colors = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#8b78f6']
  return {
    xData: data.map((item) => item.name),
    colors,
    data
  }
}
const chartData = getXData()
const commonRichStyle = {
  width: 60,
  height: 24,
  color: '#fff',
  align: 'center'
}

const options: echarts.EChartOption = {
  grid: {
    left: 160,
    right: 65,
    top: 10
    // bottom: 10
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false
    },
    axisLine: {
      show: false,
      symbol: ['none', 'arrow']
    },
    axisLabel: {
      show: false,
      color: '#74b6ee'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      // name: 'left categroy',
      inverse: true,
      data: chartData.xData,
      nameTextStyle: {
        color: '#7ec7ff',
        fontSize: 12,
        padding: [0, 30, -4, 0]
      },
      type: 'category',
      minInterval: 1,
      axisLabel: {
        color: '#74b6ee',
        formatter: function (value: number, index: number) {
          const rank = index + 1
          return `
            {ranking${rank > 3 ? 4 : rank}|NO.${rank}}   {title|${value}} `
        },
        rich: {
          ranking1: {
            backgroundColor: {
              image: ranking1
            },
            ...commonRichStyle
          },
          ranking2: {
            backgroundColor: {
              image: ranking2
            },
            ...commonRichStyle
          },
          ranking3: {
            backgroundColor: {
              image: ranking3
            },
            ...commonRichStyle
          },
          ranking4: {
            backgroundColor: {
              image: ranking4
            },
            ...commonRichStyle
          },
          title: {
            width: 60,
            align: 'center',
            color: '#fff'
          }
        }
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    {
      // name: 'right categroy',
      inverse: true,
      data: chartData.data,
      silent: true,
      nameTextStyle: {
        color: '#7ec7ff',
        fontSize: 12,
        padding: [0, 30, -4, 0]
      },
      type: 'category',
      minInterval: 1,
      axisLabel: {
        color: '#fff',
        formatter: function (value: number) {
          return value > 10000 ? (value / 10000).toFixed(2) + 'w' : value
        }
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'bar',
      barWidth: 20,
      yAxisIndex: 0,
      label: {
        show: true,
        color: '#fff',
        formatter: (params: any) => {
          const { percentage } = params.data as ChartProp
          return percentage
        }
      },
      itemStyle: {
        borderWidth: 3,
        borderRadius: 20,
        borderColor: '#11144e',
        color: function (param: any) {
          return chartData.colors[param.dataIndex]
        }
      },
      emphasis: {
        itemStyle: {
          borderWidth: 0,
          borderColor: 'none'
        }
      },
      data: chartData.data
    },

    {
      type: 'bar',
      barGap: '-100%',
      barWidth: 20,
      yAxisIndex: 1,
      silent: true,
      itemStyle: {
        borderWidth: 1,
        borderRadius: 20,
        borderColor: 'skyblue',
        color: 'none'
      },
      label: {
        show: false,
        position: 'right'
        // formatter: function (param) {
        //   console.log('param', param)
        // }
      },
      data: chartData.data.map((item) => {
        return item.maxValue
      })
    }
  ]
}
// 停止播放函数
let stopFun: Function
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
  const { init, stop } = setAutoHoverIntervalFun(wuChart, chartData.xData)
  // init()
  stopFun = stop
})
onUnmounted(() => {
  stopFun()
})
</script>

<style lang="scss" scoped>
.wu-chart {
  height: 100%;
}

.chart-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  // width: 100%;
  height: 30px;
  margin: 10px 20px 0;
  background: url(@/assets/imgs/screen/rankingChart-bg.png) no-repeat;
  background-size: 100% 100%;

  span {
    width: 18%;
    color: #fdbc52;
    text-align: center;
  }

  .auto-width {
    width: 50%;
  }
}

.place-text {
  display: inline-block;
  width: 80px;
}
</style>
